<template>
  <demoBlock title="选框组" padding class="demo-checkbox">
    <span class="sub-title">垂直排列</span>
    <vcu-checkbox-group v-model="checked">
      <vcu-checkbox name="a">复选框 a</vcu-checkbox>
      <vcu-checkbox name="b">复选框 b</vcu-checkbox>
    </vcu-checkbox-group>
    <span class="sub-title">水平排列</span>
    <vcu-checkbox-group v-model="checked" direction="horizontal">
      <vcu-checkbox name="a">复选框 a</vcu-checkbox>
      <vcu-checkbox name="b">复选框 b</vcu-checkbox>
    </vcu-checkbox-group>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const checked = ref(["a", "b"]);
    return {
      checked,
    };
  },
});
</script>
<style lang="less" scoped>
.demo-checkbox {
  .vcu-checkbox {
    margin-bottom: 10px;
  }
}
</style>
